/**
 * Created by Administrator on 2017/5/13.
 * 逻辑
 * 一切根据id 这个插件只给页面进行布局  行用div 列用div.class=inline-block
 * 对于每一个模块 用一个唯一的 id 标志
 * 其他的生成代码的任务交给后台
 * 通过ajax 利用id 找到参数 对模块进行渲染
 * 数据库记录 ID 模块 参数 这中对应的形式
 * id是全局唯一
 * 模块本身 每个模块有自己的编辑参数的页面
 * 本插件完全不用担心模版的问题
 * 只有终极模块才可以编辑 含有模块的模块是不允许编辑的 不然会覆盖掉其内容
 *
 * 编辑页面初始化的时候 遍历所有的模块 从后台调用数据
 * 编辑完成的时候  直接保存代码
 *
 * 相关数据表
 * 1、ID 模块 参数
 * 2、模块 初始化参数
 * 3、模版成品表 像文章一样保存的保存方法
 *
 * 每个模块可以用一个类来管理 每一个模块都有 根据参数生成html的方法  展示处理参数的页面 和处理参数的方法 删除的方法 类名就是模块名
 *
 * 目前有个bug 要保证拖动的模块不会进入到模块的内部
 */
(function($) {
    function EditHtml() {
        var that = this;
        //全局的变量
        that.data = {
            //被拖拽的元素
            dragedDom: undefined,
            //拖拽到达的目标元素
            targetDom: undefined,
            //目标元素的原来属性
            preBorder: undefined,
            //以下是必须参数
            //编辑区的主区域--最大的范围的
            target: undefined,
            //被拖拽的区域
            dragedArea: undefined,

            //选择放置位置的操作模板
            positionSelect:undefined,
            //column  用for-column这个类来控制在编辑的时候 行可以看得见
            //行不需要id
            columnContent:'<div  class="for-column"></div>',

            //
            cellContainer:'<div class="for-cell-container"> </div>',

            //cell  不需要设置大小 因为一旦拖入成功 会用初始化参数渲染模块 id需要替换成唯一的id号   所有模块的model最初都被设置成init
            //class=model是为了jquery 能够方便的遍历
            cellContent:'<div id="#id#" style="float:left;" model="#model#" class="model"></div>',

            //生成后的html代码
            html:'',

            curEditModelId:'',

            curModel:'',
            //选中模块触发的事件
            modelChange:function(){}
        };


    }

    EditHtml.prototype.init = function (param) {
        //console.log(param);
        var that = this;
        for (var s in param) {
            that.data[s] = param[s];
        }

        //初始化各个事件
        var children = this.data.dragedArea.children;
        //console.log(children);
        for (var i = 0; i < children.length; i++) {
            var current = children[i];
            //console.log(i);
            children[i].ondragstart = function (current,i) {
                that.data.dragedDom =  this;
            }
        }

        that.data.target.ondragenter = function (e) {
            console.log("你来拉");
            var that = editHtml;
            //通过属性存储模板
            var id = that.data.dragedDom.getAttribute('content');
            var html = that.data[id];
            //用当前时间做id
            html =  html.replace(/#id#/,'model'+Date.now());
            html = html.replace(/#model#/,'init');
            that.data.html = html;


            var cur = e.path[0];
            that.data.preBorder = cur.style.border;

            cur.style.border = "1px solid red";
        };

        that.data.target.ondragover = function (event) {
            event.preventDefault();//这个很关键 要不然没有ondrop什么事
        };

        //对最外层的没有用 要优化
        that.data.target.ondragleave = function (e) {
            var that = editHtml;
            var cur = e.path[0];
            cur.style.border = that.data.preBorder;
        };

        that.data.target.ondrop = function (e) {
            e.preventDefault();
            var that = editHtml;

            var cur = e.path[0];
            cur.style.border = that.data.preBorder;
            that.data.targetDom = cur;


            for(var i = 0;i< e.path.length;i++){
                if($(e.path[i]).attr('model')){
                    //console.log($(e.path[i]).attr('model'));
                    return ;
                }
            }

            that.showSelect();
        };

        that.data.target.onmousemove = function (e) {
            //console.log(e);
        };

        //如果页面是载入了之前的模块 那么要为每一个模块添加事件
        $(that.data.target).find(".model").click(function(){
            var that = editHtml;
            if(that.data.curEditModelId){
                $("#"+that.data.curEditModelId).css("border","0");
            }
            that.data.curEditModelId = $(this).attr('id');
            $("#"+that.data.curEditModelId).css('border','1px solid red');
            that.data.modelChange();
        });

    };

    EditHtml.prototype.parseStrToDom = function (str) {
        var d = document.createElement('div');
        d.innerHTML = str;
        return d.children[0];
    };



    EditHtml.prototype.showSelect = function () {
        var that = editHtml;
        var showTemplate = document.createElement('div');
        showTemplate.innerHTML = ' <div style="box-sizing: border-box;padding:10px;"> \
        <form id="position"> \
        <div style="">选择位置</div> \
\
        <input type="radio" name="position-select" value="1"/>前 \
        <input type="radio" name="position-select" value="2" checked/>中 \
        <input type="radio" name="position-select" value="3"/>后 \
        </form> \
        </div> \
        <div style="padding:10px;"> \
        <button onclick="editHtml.addDom(this)" style="width: 50%;background: white;border: 1px solid silver;">确定</button><button style="width: 50%;background: white;border: 1px solid silver;" onclick="$(this).parent().parent().remove();">取消</button> \
        </div>';
        showTemplate.style.position = 'absolute';
        showTemplate.style.width = '200px';
        //showTemplate.style.height = '200px';
        showTemplate.style.left = '50%';
        showTemplate.style.top = '50%';
        showTemplate.style.marginLeft = '-100px';
        showTemplate.style.marginTop = '-100px';
        showTemplate.style.border = '1px solid silver';
        document.body.append(showTemplate);
    };

    EditHtml.prototype.addDom = function(obj){
        var that = this;
        var select = $("input[name='position-select']:checked").val();
        html =that.data.html;
        var dom = this.parseStrToDom(html);
        //防止列也被加了事件
        if($(dom).attr("model")){
            dom.onclick=function(){
                if(that.data.curEditModelId){
                    $("#"+that.data.curEditModelId).css("border","0");
                }
                that.data.curEditModelId = $(dom).attr('id');
                $("#"+that.data.curEditModelId).css('border','1px solid red');
                that.data.modelChange();
            };
        }
        switch (select){
            case "1":
                $(that.data.targetDom).before(dom);
                break;
            case "2":
                $(that.data.targetDom).append(dom);
                break;
            case "3":
                $(that.data.targetDom).after(dom);
                break;
            default :
                break;
        }
        var id = $(dom).attr('id');
        var model = $(dom).attr('model');
        that.parseModel(id,model);
        $(obj).parent().parent().remove();

    };

    //获取处理dom的内容
    EditHtml.prototype.parseModel = function(modelId,modelName){
        $.get('/model/parse/'+modelId+'/'+modelName,function(html){
            $("#"+modelId).html(html);
        });
    };

    //获取整个模板的内容
    EditHtml.prototype.getContent = function(){
        var that = editHtml;
        //获取内容之前 去掉当前选中模块的样式
        $("#"+that.data.curEditModelId).css('border','0');
        alert($(that.data.target).html());
        return $(that.data.target).html();
    };

    window.editHtml = new EditHtml();

})($);
